<!-- 数据为空的组件 -->
<template>
  <div class="empty">
    <!-- 数据为空 -->
    <div class="no-data" v-if="category === 'data'">
      <!-- <img src="../assets/img/empty.png" height="200px" alt="" /> -->
      <p class="desc">{{ $t('Message.Msg.Empty') }}</p>
    </div>

    <!-- 购物车为空 -->
    <div class="no-data-cart" v-else-if="category === 'cart'">
      <!-- <img src="../assets/img/cart-empty.png" height="200px" alt="" /> -->
      <p class="desc">{{ $t('Message.Msg.CartEmpty') }}</p>
      <div class="home-btn" @click="gotoRoute('home')">{{ $t('Message.Btn.Btn11') }}</div>
    </div>

    <!-- 商品下架-->
    <div class="no-data-cart" v-else-if="category === 'off'">
      <!-- <img src="../assets/img/off-shelf.png" height="200px" alt="" /> -->
      <p class="desc">{{ $t('Message.Msg.OffShelf') }}</p>
      <div class="home-btn" @click="gotoRoute('home')">{{ $t('Message.Btn.Btn11') }}</div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  category: {
    type: String,
    default: 'data',
  },
})

const router = useRouter()
const gotoRoute = (name) => {
  router.push({
    name: name,
  })
}
</script>

<style lang="scss" scoped>
.empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;

  .no-data-cart {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .desc {
    color: #666;
    font-size: var(--common-title-font-size);
    text-align: center;
  }

  .home-btn {
    text-align: center;
    margin-top: 20px;
    padding: 0;
    color: #333;
    height: 50px;
    font-size: 17px;
    line-height: 50px;
    border: none;
    background-color: #f6b517;
    cursor: pointer;
  }
}
</style>
